<template>
    <div class="wrapper">
      <!--header部分-->
      <header>
        <p>商家信息管理</p>
      </header>
  
      <!--商家信息部分-->
      <div class="business-info">
        <p>{{ business.businessName }}</p>
        <i class="fa fa-edit" @click="toUpdateBusinessName"></i>
      </div>
  
      <!--商家信息管理-->
      <ul class="setting-button">
        <li @click="toUpdateBusinessPassword">
          <button><i class="fa fa-lock"></i>修改密码 </button>
        </li>
        <li @click="toUpdateBusinessAddress">
          <button><i class="fa fa-university"></i>修改地址 </button>
        </li>
        <li @click="toUpdateBusinessExplain">
          <button><i class="fa fa-map-o"></i>修改介绍 </button>
        </li>
        <li @click="toUpdateOrderTypeId">
          <button><i class="fa fa-shopping-basket"></i>修改点餐类型</button>
        </li>
        <li @click="toUpdateStarPrice">
          <button><i class="fa fa-rmb"></i>修改起送费</button>
        </li>
        <li @click="toUpdateDeliveryPrice">
          <button><i class="fa fa-rmb"></i>修改配送费</button>
        </li>
        <li @click="toUpdateRemark">
          <button><i class="fa fa-server"></i>修改备注</button>
        </li>
      </ul>
  
      <!-- 底部菜单部分 -->
      <BusinessFooter />
    </div>
  </template>
  

  <script>
  import { reactive, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import BusinessFooter from '../components/BusinessFooter.vue';
  
  export default {
    name: 'BusinessManage',
    components: {
      BusinessFooter
    },
    setup() {
      const router = useRouter();
      const business = reactive({
        businessId: '',
        businessName: '',
        businessAddress: '',
        businessExplain: '',
        orderTypeId: '',
        starPrice: '',
        deliveryPrice: '',
        remarks: '',
        password: ''
      });
  
      const loadBusinessData = () => {
        const storedBusiness = JSON.parse(sessionStorage.getItem('business'));
        if (storedBusiness) {
          Object.assign(business, storedBusiness); // 合并session存储的数据
        }
      };
  
      onMounted(() => {
        loadBusinessData();
      });
  
      const toUpdateBusinessName = () => {
        router.push('/updatebusinessName');
      };
  
      const toUpdateBusinessPassword = () => {
        router.push('/updateBusinessPassword');
      };
  
      const toUpdateBusinessAddress = () => {
        router.push('/updateBusinessAddress');
      };
  
      const toUpdateBusinessExplain = () => {
        router.push('/updateBusinessExplain');
      };
  
      const toUpdateOrderTypeId = () => {
        router.push('/updateOrderTypeId');
      };
  
      const toUpdateStarPrice = () => {
        router.push('/updateStarPrice');
      };
  
      const toUpdateDeliveryPrice = () => {
        router.push('/updateDeliveryPrice');
      };
  
      const toUpdateRemark = () => {
        router.push('/updateRemark');
      };
  
      return {
        business,
        toUpdateBusinessName,
        toUpdateBusinessPassword,
        toUpdateBusinessAddress,
        toUpdateBusinessExplain,
        toUpdateOrderTypeId,
        toUpdateStarPrice,
        toUpdateDeliveryPrice,
        toUpdateRemark
      };
    }
  };
  </script>
  

<style scoped>
    /****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/****************** header ******************/
	.wrapper header {
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #fff;
    font-size: 4.8vw;
		
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/****************** 商家信息部分 ******************/
	.wrapper .business-info {
		width: 100%;
		box-sizing: border-box;
		padding: 18vw 6vw 6vw;
		display: flex;
		align-items: center;
		border-bottom: solid 1.5px #DDD;
	}

	.wrapper .business-info p {
		font-size: 4vw;
		margin-right: 3vw;
		margin-left: 3vw;
	}

	.wrapper .business-info .fa-edit {
		font-size: 4vw;
		cursor: pointer;
		user-select: none;
	}

	/********* 设置按钮部分 *********/
	.wrapper .setting-button {
		width: 100%;
		box-sizing: border-box;
		padding: 4vw 10vw 0;
	}

	.wrapper .setting-button li {
		margin-bottom: 3vw;
	}

	.wrapper .setting-button li button {
		width: 100%;
		height: 10vw;
		background-color: white;
		border: none;
		outline: none;
		border-radius: 4vw;
		border: solid 1.5px #DDD;

		font-size: 3.5vw;
		color: dimgray;

		cursor: pointer;

		display: flex;
		align-items: center;
	}

	.wrapper .setting-button li button i {
		margin: 0 3vw;
	}

</style>